<template>



<!--    <TinyMCETest></TinyMCETest>-->
    <div>
        <TinyMCETest1></TinyMCETest1>
        <TestCodeMirrorHTML1></TestCodeMirrorHTML1>
    </div>

    <div  v-for="(entry,idx) in arr" v-show="entry?.isShowing" :key="entry.id">
        <CommonTagDisplay :label="entry.value"></CommonTagDisplay>
<!--        <CommonTagDisplay :label="entry.value" :key="entry.id" v-show="entry?.isShowing"></CommonTagDisplay>-->
    </div>

    <br/>
    {{sw}}
    <br/>
<el-button @click="buildShowing">random</el-button>
    <br/>
    {{cptTest}}
</template>

<script setup>
import CommonTagDisplay from "@/components/WordFormedTag/CommonTagDisplay.vue";
import {computed, reactive, ref,watchEffect} from "vue";
import {clearAndPushAll} from "@/utils/ArrayUtil";
import TinyMCETest from "@/testCompGroupC/TinyMCETest.vue";
import TinyMCETest1 from "@/testCompGroupC/TinyMCETest1.vue";
import TestCodeMirrorHTML1 from "@/testCompGroupC/TestCodeMirrorHTML1.vue";

let arr = reactive([{id:1,value:"a",isShowing:true},{id:2,value:"b",isShowing:true},{id:3,value:"c",isShowing:true},{id:4,value:"d",isShowing:true},{id:5,value:"e",isShowing:true},{id:6,value:"f",isShowing:true}]);
let sw = ref(false);
let arr2 = reactive([{id:1,value:"a",isShowing:true},{id:2,value:"b",isShowing:true},{id:3,value:"c",isShowing:true},{id:4,value:"d",isShowing:true},{id:5,value:"e",isShowing:true},{id:6,value:"f",isShowing:true}]);

let aMap = reactive(new Map([["a",[1,2,3]],["b",[3,4,5]]]));


function testFunc1(arr) {
    console.log("change of aMap compute");
    return arr.filter(entry => {
        if (aMap.get("a")) {
            console.log(aMap.get("a"));
        }
    })
}

let cptTest = computed(()=>{
    console.log("cptTest computed");
    testFunc1(arr2);
    return ssss();
})

function ssss(){
     return [...aMap.entries()];
}

watchEffect(()=>{
    console.log("watchedEffect P001");
    [...aMap.entries()].forEach(entry=>{
        console.log(entry);
    })
})

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

let showArr = reactive([]);

function buildShowing(e){
    aMap.clear();
    let arr1 = [];
    arr1.push(getRandomInt(3,15));
    arr1.push(getRandomInt(3,15));

    aMap.set(["a","b","c"][getRandomInt(0,2)],arr1);


    sw.value = !sw.value;
    if(sw.value){
        arr[getRandomInt(0,2)].isShowing=false;
        arr[getRandomInt(0,2)].isShowing=false;
        arr[getRandomInt(0,2)].isShowing=false;
        arr[getRandomInt(0,2)].isShowing=false;
    }else{
        arr.forEach(ele=>ele.isShowing=true);
    }
}

// let cptArr = computed(()=>{
//     // console.log("re computed")
//     if(sw.value){
//         let theSet = new Set();
//         theSet.add(arr[getRandomInt(0,2)]);
//         // theSet.add(arr[getRandomInt(0,2)]);
//         return [...theSet];
//     }else{
//         return arr;
//     }
//
// })
</script>

<style scoped>

</style>